<template>
  <div>
    <el-table
      :data="summaryList"
      :loading="loading"
      style="width: 100%"
      @sort-change="handleSortChange"
    >
      <el-table-column label="序号" width="50" align="center">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="编码" align="center" min-width="120">
        <template slot-scope="scope">
          <div>
            <div style="font-weight: bold;">{{ scope.row.itemCode }}</div>
            <div style="color: #909399; font-size: 12px;">{{ scope.row.itemName }}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="类型" align="center" width="80">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.itemType === 'container' ? 'primary' : 'success'"
            size="small"
          >
            {{ scope.row.itemType === 'container' ? '器具' : '物料' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="所在项目" align="center" min-width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.projectName">
            <div style="font-weight: bold;">{{ scope.row.projectCode }}</div>
            <div style="color: #909399; font-size: 12px;">{{ scope.row.projectName }}</div>
          </div>
          <span v-else style="color: #C0C4CC;">-</span>
        </template>
      </el-table-column>

      <el-table-column label="所在库房" align="center" prop="warehouseName" min-width="100" />

      <el-table-column label="位置状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="getLocationStatusTag(scope.row.locationStatus)"
            size="small"
          >
            {{ getLocationStatusName(scope.row.locationStatus) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="数量" align="center" width="100" sortable="custom" prop="itemCount">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: #409EFF; font-weight: bold; font-size: 16px;"
            @click="handleDetailClick(scope.row)"
            :title="scope.row.itemType === 'container' ? '器具数量' : '物料总量'"
          >
            {{ scope.row.itemCount }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="$emit('pagination')"
    />
  </div>
</template>

<script>
export default {
  name: 'WarehouseSummaryTable',
  props: {
    summaryList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    queryParams: {
      type: Object,
      required: true
    }
  },
  methods: {
    /** 获取位置状态名称 */
    getLocationStatusName(status) {
      const statusMap = {
        '1': '在库',
        '2': '在途'
      }
      return statusMap[status] || '未知'
    },
    /** 获取位置状态标签样式 */
    getLocationStatusTag(status) {
      const tagMap = {
        '1': 'success',  // 在库
        '2': 'warning'   // 在途
      }
      return tagMap[status] || ''
    },
    /** 处理详情点击 */
    handleDetailClick(row) {
      this.$emit('detail-click', row)
    },
    /** 处理排序变化 */
    handleSortChange(column) {
      this.$emit('sort-change', column)
    }
  }
}
</script>

<style scoped>
/* 库房汇总表格组件样式 */
</style>
